<template>
  <div class="ele-body">
    <div class="bg-fff padding-30" style="min-width: 450px">
      <a-form
        :label-col="{ md: { span: 5 }, sm: { span: 4 }, xs: { span: 24 } }"
        :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
      >
        <a-row :gutter="24">
          <a-col :md="12" :sm="24" :xs="24">
            <a-form-item label="" :colon="false">
              <div class="solid padding-y-15 padding-x-30 card">
                <div>储值卡：{{ info.value_card_no || '' }}</div>
                <div class="flex align-center justify-center margin-top-30">
                  <div>
                    <div class="margin-bottom-10 fs-24"
                      >¥ {{ info.credit || 0 }}</div
                    >
                    <a-space size="large">
                      <a @click="optAction(1)">充值</a>
                      <a @click="optAction(2)">退款</a>
                    </a-space>
                  </div>
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24" :xs="24">
            <a-form-item label="" :colon="false">
              <div
                class="solid padding-y-15 padding-x-30 card"
                style="width: 100%"
              >
                <a-row :gutter="24">
                  <a-col :md="12" :sm="12" :xs="12">
                    <a-form-item label="充值金额" style="margin-bottom: 0">
                      <span>{{ info.recharge || 0 }}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="12" :sm="12" :xs="12">
                    <a-form-item label="赠送金额" style="margin-bottom: 0">
                      <span>{{ info.send || 0 }}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="12" :sm="12" :xs="12">
                    <a-form-item label="消费付款" style="margin-bottom: 0">
                      <span>{{ info.order_pay || 0 }}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="12" :sm="12" :xs="12">
                    <a-form-item label="退储值卡" style="margin-bottom: 0">
                      <span>{{ info.value_card_refund || 0 }}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="12" :sm="12" :xs="12" :offset="12">
                    <a-form-item label="退货退款" style="margin-bottom: 12px">
                      <span>{{ info.order_refund || 0 }}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="24" :sm="24" :xs="24">
                    <a-row :gutter="24">
                      <a-col :md="18" :sm="16" :xs="16">
                        <div class="bg-e5e5e5 padding-6">
                          {{ info.member?.name }} |
                          {{ info.member?.nickname }} |
                          {{ info.member?.mobile }}</div
                        >
                      </a-col>
                      <a-col :md="6" :sm="8" :xs="8">
                        <div>持卡人</div>
                        <div>签 名</div>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :md="24" :sm="24" :xs="24">
                    <a-form-item label="客户归属" style="margin-bottom: 0">
                      <span>{{ info.member?.from || '' }}</span>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div>
      <!-- 搜索表单 -->
      <user-search
        v-if="searchData.length > 0"
        :searchData="searchData"
        @search="reload"
      />
    </div>
    <div class="padding-15 bg-fff">
      <a-button @click="daochu()">导出</a-button>
    </div>
    <div class="padding-x-15 bg-fff">
      <vxe-table border ref="xTable" align="center" :data="tableData">
        <vxe-column field="order_sn" title="流水号" fixed="left" />
        <vxe-column field="create_time" title="时间" />
        <vxe-column field="amount" title="金额" />
        <vxe-column field="target_id" title="相关单据" />
        <vxe-column field="type_name" title="业务类型" />
        <vxe-column field="status_name" title="状态" />
        <vxe-column field="store_name" title="交易门店" />
        <vxe-column field="note_for" title="备注" />
      </vxe-table>
    </div>
    <div class="padding-x-15 bg-fff">
      <vxe-pager
        size="mini"
        :current-page="form.page"
        :page-size="form.page_size"
        :total="total"
        :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextJump', 'FullJump']"
        @page-change="handlePageChange"
      />
    </div>

    <!-- 充值弹窗 -->
    <add
      v-if="showAdd"
      v-model:visible="showAdd"
      @done="done"
      :editData="editData"
    />
    <!-- 申请退款弹窗 -->
    <back
      v-if="showBack"
      v-model:visible="showBack"
      @done="done"
      :editData="editData"
    />
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import { finishPageTab, reloadPageTab } from '@/utils/page-tab-util';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import UserSearch from '@/components/zbTable/components/user-search.vue';
  import add from '../get_list/components/add.vue';
  import back from '../get_list/components/back.vue';
  import { get_value_card_detail } from '@/api/order/value_card';
  import { get_store_select } from '@/api/material/select';
  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  const loading = ref(false);
  const info = ref(false);
  const editData = ref({});
  const actionData = ref({});

  const showAdd = ref(false);
  const showBack = ref(false);
  const form = reactive({
    page: 1,
    page_size: 10,
    member_id: query.member_id,
    filters: {}
  });
  const form2 = reactive({
    create_start_time: '',
    create_end_time: '',
    order_sn: '',
    status: '',
    type: '',
    target_id: '',
    store_code: ''
  });
  // 表格搜索动态表单
  let searchData = ref([
    {
      label: '时间',
      name: 'time1',
      options: [],
      type: 'timerange'
    },
    {
      label: '单据编号',
      name: 'order_sn',
      options: [],
      type: 'text'
    },
    {
      label: '收入/支出',
      name: 'status',
      options: [
        { key: '', label: '全部' },
        { key: '1', label: '收入' },
        { key: '2', label: '支出' }
      ],
      type: 'select'
    },
    {
      label: '业务类型',
      name: 'type',
      options: [
        { key: '', label: '全部' },
        { key: '1', label: '充值' },
        { key: '2', label: '消费赠送' },
        { key: '3', label: '消费付费' },
        { key: '4', label: '退款' },
        { key: '5', label: '退货退款' }
      ],
      type: 'select'
    },
    {
      label: '相关单据',
      name: 'target_id',
      options: [],
      type: 'text'
    },
    {
      label: '交易门店',
      name: 'store_code',
      options: [],
      type: 'select'
    }
  ]);
  const tableData = ref([]);
  const total = ref(0);

  onMounted(() => {
    console.log(query);
    get_store_select({ page: 1, page_size: 99999 }).then((res) => {
      searchData.value[searchData.value.length - 1].options = res;
    });
    if (query.member_id) {
      getList();
    }
  });
  const getList = () => {
    form.filters = form2;
    get_value_card_detail(form).then((res) => {
      info.value = res.detail;
      total.value = res.list.total;
      tableData.value = res.list.data;
      editData.value = res.detail.member;
    });
  };
  const reload = (val) => {
    val.create_start_time = val.start_time;
    val.create_end_time = val.end_time;
    let obj = { ...form2, ...val };
    form.filters = obj;
    get_value_card_detail(form).then((res) => {
      tableData.value = res.list.data;
    });
  };

  const handlePageChange = ({ currentPage, pageSize }) => {
    form.page = currentPage;
    getList();
  };

  const optAction = (type) => {
    if (type == 1) {
      showAdd.value = true;
      actionData.value.url = 'order/value_card/recharge';
    } else if (type == 2) {
      showBack.value = true;
      actionData.value.url = 'order/value_card/refund';
    }
  };
  const done = (form) => {
    actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    showAdd.value = false;
    showBack.value = false;
    getList();
  };
</script>

<style lang="less" scoped>
  .card {
    height: 220px;
  }
</style>
